{% load static %}
<!doctype html>
<html lang="zh">
<head>
    <link rel="stylesheet" type="text/css" href="{% static "login/css/normalize.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "login/css/default.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "login/css/styles.css" %}">

{#    <script src="{% static "jquery-3.2.1/jquery-3.2.1.min.js" %}"></script>#}
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

{#    <script src="{% static "layui-v2.5.7/layui/layui.all.js" %}"></script>#}

    <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>

{#    <link rel="stylesheet" type="text/css" href="{% static "layui-v2.5.7/layui/css/layui.css" %}">#}
    <link type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" rel="stylesheet">

{#    <link rel="stylesheet" type="text/css" href="/static/login/css/normalize.css" />#}
{#    <link rel="stylesheet" type="text/css" href="/static/login/css/default.css">#}
{#    <link rel="stylesheet" type="text/css" href="/static/login/css/styles.css">#}
</head>
<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>FBA索赔 <span></span></h1>
        </header>
        <div class="login-wrap">
            <div class="login-html">
                <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
                <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
                <div class="login-form">
                    <form name="sign_in" id="sign" autocomplete="off">
                        {% csrf_token %}
                        <div class="sign-in-htm">
                            <div class="group">
                                <label for="user" class="label">用户名</label>
                                <input id="sign_user" name="username" type="text" class="input" >
                            </div>
                            <div class="group">
                                <label for="pass" class="label">密码</label>
                                <input id="sign_pass" name="password" type="password" class="input" data-type="password">
                            </div>
                            <div class="group">
                                <input id="check" name="keep_sign" type="checkbox" class="check" checked>
                                <label for="check"><span class="icon"></span> 记住密码</label>
                            </div>
                            <div class="button-content">
                                <input type="button" id="sign_sub" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"  onclick="sign()" value="登陆"/>
{#                                <input type="button" id="sign_sub" class="button" value="Sign In" onclick="sign()">#}
                            </div>
                            <div class="hr"></div>
                            <div class="foot-lnk">
                                <a href="#forgot">忘记密码？</a>
                            </div>
                        </div>
                    </form>

                    <form name="register" id="sign_up" >
                        {% csrf_token %}
                        <div class="sign-up-htm">
                        <div class="group">
                            <label for="user" class="label">用户名</label>
                            <input id="signup_user" name="username" type="text" class="input" autocomplete="off">
                        </div>
                        <div class="group">
                            <label for="pass" class="label">密码</label>
                            <input id="signup_pass" name="password" type="password" class="input" data-type="password" autocomplete="off">
                        </div>
                        <div class="group">
                            <label for="pass" class="label">确认密码</label>
                            <input id="re_pass" name="re_password" type="password" class="input" data-type="password" autocomplete="off">
                        </div>
                        <div class="button-content">
                            <input type="button"  id="reg_sub" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" onclick="sign_up()" value="注册"/>
{#                            <input type="button" id="reg_sub" class="button" value="Sign Up" onclick="sign_up()">#}
                        </div>
                        <div class="hr"></div>
                        <div class="foot-lnk">
                            <label for="tab-1" id="return_sing_in"><a>返回登录页？</a></label>
                        </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</body>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery,
            upload = layui.upload;
    });

    function sign() {
        let sign_form_datas = $('#sign').serializeArray();
        let username = sign_form_datas[1].value.replace(/\s/g, "");
        let password = sign_form_datas[2].value.replace(/\s/g, "");
        if(!username || !password){
            layer.msg('用户名和密码不能为空!', {icon:2, time:1500});
        }else {
             $.ajax({
                url: "/sign/",
                type: "POST",
                dataType: "json",
                data: {sign_datas: JSON.stringify(sign_form_datas), },
                //async: false,
                success: function (result) {
                    if (result.code == '1') {
                        layer.msg('登录成功', {time: 800}, function () {
                            window.location.href='/home/';
                        });
                    }
                    else {
                        layer.msg('登录失败:用户名或密码错误!', {icon:2, time:1500});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert('错误信息：' + XMLHttpRequest.responseText); //获取的信息即是异常中的Message
                }
             });
        }
    }

    function sign_up() {
        let register_form_datas = $('#sign_up').serializeArray();
        {#console.log('sign');#}
        let username = register_form_datas[1].value.replace(/\s/g, "");
        let password = register_form_datas[2].value.replace(/\s/g, "");
        let repassword = register_form_datas[3].value.replace(/\s/g, "");
        if(!username || !password){
            layer.msg('用户名和密码不能为空！', {icon:2, time:1500});
        }else if(password != repassword){
            layer.msg('两次密码不一致！', {icon:2, time:1500});
        }else{
            $.ajax({
                url: "/register/",
                {#url: "#",#}
                type: "POST",
                dataType: "json",
                data: {register_datas: JSON.stringify(register_form_datas), },
                //async: false,
                success: function (result) {
                    if (result.code == '1') {
                        layer.msg('注册成功', {time: 800}, function () {
                            {#window.location.href='/sign/';#}
                            $('#return_sing_in').click();
                        });
                    }
                    else if(result.code == '-2'){
                            layer.msg('注册失败:用户名重复！', {icon:2, time:2000});
                    }else {
                         layer.msg('注册失败', {icon:2, time:2000});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert('错误信息：' + XMLHttpRequest.responseText); //获取的信息即是异常中的Message
                }
            });
        }
    }

</script>
</html>